import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Tabs,
  DatePicker,
  Select,
  Radio,
  Space,
  message,
  Checkbox,
} from "antd";
import { useState, forwardRef, useImperativeHandle, useEffect } from "react";
import styles from "./styles.less";

const { TextArea } = Input;
import dayjs from "dayjs";

export default forwardRef((props, ref) => {
  const { row } = props;
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();

  const submitForm = async () => {
    await form.validateFields();
    setOpen(false);
    message.success("操作成功");
  };

  useImperativeHandle(ref, () => ({
    setOpen,
  }));

  useEffect(() => {
    console.log(row);
    if (row?.id) {
      form.setFieldsValue({
        ...row,
        startDate: dayjs(row.startDate),
        endDate: dayjs(row.endDate),
      });
    }
  }, [row]);

  return (
    <Modal
      open={open}
      title={row?.id ? "放假编辑" : "场馆放假设置"}
      forceRender
      width={600}
      onCancel={() => setOpen(!open)}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={submitForm} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item name="id" hidden>
          <Input />
        </Form.Item>

        {row?.id && (
          <Form.Item label="场馆名称" name="id">
            <Input disabled bordered={false} />
          </Form.Item>
        )}

        <Form.Item
          label="开始时间"
          name="startDate"
          rules={[{ required: true }]}
        >
          <DatePicker
            format={"YYYY-MM-DD HH:mm"}
            minuteStep={15}
            showTime={{
              format: "HH:mm",
            }}
          />
        </Form.Item>

        <Form.Item label="结束时间" name="endDate" rules={[{ required: true }]}>
          <DatePicker
            format={"YYYY-MM-DD HH:mm"}
            minuteStep={15}
            showTime={{
              format: "HH:mm",
            }}
          />
        </Form.Item>
        {!row?.id && (
          <>
            <Form.Item
              label="所属场馆"
              name="所属场馆"
              rules={[{ required: true }]}
            >
              <Checkbox.Group>
                <Checkbox value={1}>xx场馆</Checkbox>
                <Checkbox value={2}>xx场馆</Checkbox>
                <Checkbox value={3}>xx场馆</Checkbox>
              </Checkbox.Group>
            </Form.Item>
          </>
        )}

        <Form.Item label="备注" name="remark">
          <TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
});

// export default Dom
